<script setup>
import { watchEffect, ref } from "vue";
import Dialog from "@/components/Dialog.vue";
import IncidentDialog_lct from "./incidentDialogitem2_lct.vue";

const props = defineProps(["visible", "title", "thead", "data"]);
const gxp1show = ref(false);

const closegxp1 = () => {
  gxp1show.value = false;
};

watchEffect(() => {
  console.log(props.data);
});
const emits = defineEmits(["close"]);
const eventTypeProcess = (v) => {
  switch (v) {
    case "H01131A":
      return "涉教舆情";

    case "720050A1":
      return "岗位招录";

    case "720152":
      return "优待对象入学";

    case "H0204A1":
      return "师生传染病病例";

    case "H03101A":
      return "校外培训纠纷解决";

    case "H02571A":
      return "教育领域自然灾害(暴雨)响应";

    default:
      break;
  }
};
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="large"
    @close="
      () => {
        emits('close');
      }
    "
  >
    <div class="gxp_box2">
      <div class="gxp_box2_c">
        <div class="gxp_box2_c_c">
          <div class="gxp_box2_c_c_item1">
            <div class="gxp_box2_c_c_item1_tit">
              <span class="gxp_box2_c_c_item1_tit_c">基本信息</span>
            </div>
            <div class="gxp_box2_c_c_item1_nr">
              <div class="gxp_box2_c_c_item1_nr_left">
                <div class="lable">事件标题</div>
                <div class="lable_content">{{ props.data?.eventTitle }}</div>
              </div>
              <div class="gxp_box2_c_c_item1_nr_right">
                <div class="lable">事件状态</div>
                <div
                  class="lable_content"
                  :class="{ accomplish: props.data?.state === '已办结' }"
                >
                  {{ props.data?.state }}
                </div>
              </div>
            </div>
            <div class="gxp_box2_c_c_item1_nr">
              <div class="gxp_box2_c_c_item1_nr_left">
                <div class="lable">事件时间</div>
                <div class="lable_content">{{ props.data?.happenTime }}</div>
              </div>
              <div class="gxp_box2_c_c_item1_nr_right">
                <div class="lable">事件单号</div>
                <div class="lable_content">{{ props.data?.eventNum }}</div>
              </div>
            </div>
            <div class="gxp_box2_c_c_item1_nr1">
              <div class="gxp_box2_c_c_item1_nr1_tit">处置意见</div>
              <div class="gxp_box2_c_c_item1_nr1_nr">
                {{ props.data?.opinions }}
              </div>
            </div>
            <div class="gxp_box2_c_c_item1_nr">
              <div class="gxp_box2_c_c_item1_nr_left">
                <div class="lable">事件类型</div>
                <div class="lable_content">
                  {{ eventTypeProcess(props.data?.eventType) }}
                </div>
                <div class="lable_lct" @click="gxp1show = true">
                  <img src="./imgs/lc.png" class="lable_lct_i" />
                  <span>流程图</span>
                </div>
              </div>
            </div>
          </div>
          <div class="gxp_box2_c_c_item2">
            <div class="gxp_box2_c_c_item1_tit">
              <span class="gxp_box2_c_c_item1_tit_c">处置信息</span>
            </div>
            <div class="gxp_box2_c_c_item1_tit2">
              <div class="gxp_box2_c_c_item1_tit2_z">三级城市治理中心</div>
              <div class="gxp_box2_c_c_item1_tit2_r">教育智治体系</div>
            </div>
            <div class="lct_box">
              <div class="lct_box_a">
                <div class="lct_box_a_b">
                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_l">
                      <div>市级</div>
                      <div>多跨部门</div>
                    </div>
                    <img src="./imgs/lct3.png" alt="" class="img_item1" />
                  </div>

                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_l">
                      <div>区县</div>
                      多跨部门
                    </div>
                    <img src="./imgs/lct3.png" alt="" class="img_item1" />
                  </div>

                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_l">
                      <div>镇街乡镇</div>
                    </div>
                  </div>
                </div>
                <div class="lct_box_a_b" style="flex: 1">
                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_r">
                      <div class="lct_box_a_c_r_c">公安局</div>
                      <div class="lct_box_a_c_r_c">司法局</div>
                    </div>
                  </div>

                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_r"></div>
                  </div>

                  <div class="lct_box_a_c">
                    <div class="lct_box_a_c_r" style="border-bottom: 0px"></div>
                  </div>
                </div>
              </div>
              <div class="lct_box_b">
                <div class="lct_box_b_c">
                  <img src="./imgs/lct4.png" alt="" />
                </div>
                <div class="lct_box_b_c">
                  <img src="./imgs/lct4.png" alt="" />
                </div>
                <div class="lct_box_b_c"></div>
              </div>
              <div class="lct_box_c">
                <div class="lct_box_c_b">
                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_l">
                      <div>市教委</div>
                    </div>
                    <img src="./imgs/lct3.png" alt="" class="img_item1" />
                  </div>

                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_l">
                      <div>区县教委</div>
                    </div>

                    <img src="./imgs/lct3.png" alt="" class="img_item1" />
                  </div>

                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_l">
                      <div>学校</div>
                    </div>
                  </div>
                </div>
                <div class="lct_box_c_b" style="flex: 1">
                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_r">
                      <div class="lct_box_c_c_r_c">
                        <span>处置机构名称</span>
                        <span>处置意见</span>
                      </div>
                      <div class="lct_box_c_c_r_c1">
                        <span>{{ props.data?.orgName }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_r">
                      <div class="lct_box_c_c_r_c">
                        <span>处置机构名称</span>
                        <span>处置意见</span>
                      </div>
                      <div class="lct_box_c_c_r_c1">
                        <span>{{ props.data?.opCtyInfo?.[0]?.orgName }}</span>
                        <span> {{ props.data?.opCtyInfo?.[0]?.opinions }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="lct_box_c_c">
                    <div class="lct_box_c_c_r" style="border-bottom: 0px">
                      <div class="lct_box_c_c_r_c">
                        <span>处置机构名称</span>
                        <span>处置意见</span>
                      </div>
                      <div class="lct_box_c_c_r_c1">
                        <span>
                          {{
                            props.data?.opCtyInfo?.[0]?.opSchInfo?.[0].orgName
                          }}
                        </span>
                        <span>
                          {{
                            props.data?.opCtyInfo?.[0]?.opSchInfo?.[0]?.opinions
                          }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lct_box_b">
                <div class="lct_box_b_c">
                  <img src="./imgs/lct4.png" alt="" />
                </div>
                <div class="lct_box_b_c"></div>
                <div class="lct_box_b_c"></div>
              </div>
              <div class="lct_box_d">
                <div class="lct_box_d_c1">高校</div>
                <div class="lct_box_d_c2">无反馈</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <IncidentDialog_lct
        :visible="gxp1show"
        :title="'流程图'"
        :thead="thead"
        :data="props.data?.eventType"
        @close="closegxp1"
      ></IncidentDialog_lct>
    </div>
  </Dialog>
</template>

<style lang="less" scoped>
.item1 {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  // border: 1px red solid;
}
.lable_content {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 16px;
  color: #c9e9f8;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.accomplish {
  color: #33dc19;
}
.lable_lct {
  width: 84px;
  height: 28px;
  margin-left: 32px;
  cursor: pointer;
  background: rgba(22, 105, 182, 0.1);
  box-shadow: inset 0px 0px 15px 0px rgba(96, 207, 255, 0.8);
  border-radius: 20px 20px 20px 20px;
  border: 1px solid rgba(201, 233, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  color: #c9e9f8;
  .lable_lct_i {
    width: 14px;
    height: 14px;
  }
}
.lable {
  width: 70px;
  height: 100%;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 16px;
  color: rgba(201, 233, 248, 0.6);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  margin-right: 12px;
}
.lable1 {
  width: 120px;
  height: 100%;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 16px;
  color: #c9e9f8;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  margin-right: 12px;
}
.gxp_box2 {
  width: 100%;
  height: 100%;
  display: flex;
  .gxp_box2_c {
    width: 100%;
    height: 100%;
    padding: 16px 30px 0;
    .gxp_box2_c_c {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      // white-space: nowrap;
      .gxp_box2_c_c_item1 {
        width: 100%;
        height: 170px;
        // border: 1px gold solid;
        .gxp_box2_c_c_item1_tit {
          width: 100%;
          height: 34px;
          font-family: "Alibaba PuHuiTi 2.0-85 Bold";
          font-weight: normal;
          font-size: 18px;
          line-height: 34px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          padding-left: 10px;
          background: url(./imgs/txtBg1.png) no-repeat;
          background-size: 100% 100%;
          .gxp_box2_c_c_item1_tit_c {
            background-image: linear-gradient(#cef0fd 0%, #6baacf 100%);
            background-clip: text;
            color: transparent;
          }
        }
        .gxp_box2_c_c_item1_nr {
          width: 980px;
          height: 16px;
          // border: 1px gold solid;
          margin-top: 16px;
          display: flex;
          .gxp_box2_c_c_item1_nr_left {
            width: 50%;
            height: 100%;

            display: flex;
            align-items: center;
          }
          .gxp_box2_c_c_item1_nr_right {
            width: 50%;
            height: 100%;

            display: flex;
          }
        }
        .gxp_box2_c_c_item1_nr1 {
          width: 980px;
          min-height: 16px;
          display: flex;

          margin-top: 16px;
          .gxp_box2_c_c_item1_nr1_tit {
            width: 70px;
            height: 16px;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: normal;
            font-size: 16px;
            color: rgba(201, 233, 248, 0.6);
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .gxp_box2_c_c_item1_nr1_nr {
            width: 800px;
            max-height: 48px;
            // overflow: auto;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: normal;
            font-size: 16px;
            color: #33dc19;
            line-height: 18px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 12px;
            // border: 1px red solid;
          }
        }
      }
      .gxp_box2_c_c_item2 {
        flex: 1;
        width: 100%;
        margin-top: 20px;
        // border: 1px gold solid;
        .gxp_box2_c_c_item1_tit {
          width: 100%;
          height: 34px;
          font-family: "Alibaba PuHuiTi 2.0-85 Bold";
          font-weight: normal;
          font-size: 18px;
          line-height: 34px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          padding-left: 10px;
          background: url(./imgs/txtBg1.png) no-repeat;
          background-size: 100% 100%;
          .gxp_box2_c_c_item1_tit_c {
            background-image: linear-gradient(#cef0fd 0%, #6baacf 100%);
            background-clip: text;
            color: transparent;
          }
        }
        .gxp_box2_c_c_item1_tit2 {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          // border: 1px red solid;
          margin-top: 12px;
          .gxp_box2_c_c_item1_tit2_z {
            width: 221px;
            height: 30px;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: normal;
            font-size: 16px;
            color: #ffffff;
            line-height: 30px;
            // text-align: center;
            font-style: normal;
            text-transform: none;
            background: url(./imgs/txtBg2.png) no-repeat;
            background-size: 100% 100%;
            padding-left: 10px;
          }
          .gxp_box2_c_c_item1_tit2_r {
            flex: 1;
            height: 30px;
            margin-left: 32px;
            font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
            font-weight: normal;
            font-size: 16px;
            color: #ffffff;
            line-height: 30px;
            // text-align: center;
            font-style: normal;
            text-transform: none;
            background: url(./imgs/txtBg3.png) no-repeat;
            background-size: 100% 100%;
            padding-left: 10px;
          }
        }
        .lct_box {
          width: 100%;
          height: 430px;
          margin-top: 12px;
          // border: 1px red solid;
          display: flex;
          .lct_box_a {
            width: 221px;
            height: 100%;
            // background: rgba(24, 76, 129, 0.5);
            border: 1px solid rgba(201, 233, 248, 0.2);
            // display: flex;
            // flex-wrap: wrap;
            // justify-content: start;
            // border: 1px red solid;
            // position: relative;
            display: flex;
            .lct_box_a_b {
              width: 83px;
              height: 100%;
            }

            .lct_box_a_c {
              width: 100%;
              height: 143px;
              position: relative;
              .img_item1 {
                width: 24px;
                height: 24px;
                position: absolute;
                left: 30px;
                bottom: -12px;
              }
              display: flex;
              .lct_box_a_c_l {
                width: 100%;
                height: 100%;

                display: flex;
                // flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
                font-weight: normal;
                font-size: 16px;
                color: #c9e9f8;
                // line-height: 19px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                padding: 20% 0 20% 0;
              }
              .lct_box_a_c_r {
                width: 100%;
                height: 100%;
                // border: 1px red solid;
                // background: rgba(24, 76, 129, 0.5);
                border-left: 1px solid rgba(201, 233, 248, 0.2);
                border-bottom: 1px solid rgba(201, 233, 248, 0.2);
                border-right: 0;
                padding: 0 0 0 12px;
                .lct_box_a_c_r_c {
                  height: 16px;
                  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
                  font-weight: normal;
                  font-size: 16px;
                  color: #c9e9f8;
                  line-height: 16px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  margin-top: 12px;
                }
              }
            }
          }
          .lct_box_b {
            width: 32px;
            height: 100%;

            .lct_box_b_c {
              width: 100%;
              height: 33.3%;
              // border: 1px red solid;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 24px;
                height: 24px;
              }
            }
          }
          // .lct_box_c {
          //   flex: 1;
          //   // width: 971px;
          //   height: 100%;
          //   // background: rgba(24, 76, 129, 0.5);
          //   border: 1px solid rgba(201, 233, 248, 0.2);
          //   // padding: 17px 12px 17px 12px;
          //   display: flex;
          //   justify-content: space-between;
          //   position: relative;
          // }
          .lct_box_c {
            flex: 1;
            height: 100%;
            // background: rgba(24, 76, 129, 0.5);
            border: 1px solid rgba(201, 233, 248, 0.2);
            // display: flex;
            // flex-wrap: wrap;
            // justify-content: start;
            // border: 1px red solid;
            // position: relative;
            display: flex;
            .lct_box_c_b {
              width: 83px;
              height: 100%;
            }

            .lct_box_c_c {
              width: 100%;
              height: 143px;
              position: relative;
              .img_item1 {
                width: 24px;
                height: 24px;
                position: absolute;
                left: 30px;
                bottom: -12px;
              }
              display: flex;
              .lct_box_c_c_l {
                width: 100%;
                height: 100%;

                display: flex;
                // flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
                font-weight: normal;
                font-size: 16px;
                color: #c9e9f8;
                // line-height: 19px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                padding: 20% 0 20% 0;
              }
              .lct_box_c_c_r {
                width: 100%;
                height: 100%;
                // border: 1px red solid;
                // background: rgba(24, 76, 129, 0.5);
                border-left: 1px solid rgba(201, 233, 248, 0.2);
                border-bottom: 1px solid rgba(201, 233, 248, 0.2);
                border-right: 0;
                padding: 12px 0 0 12px;
                display: flex;
                gap: 12px;
                .lct_box_c_c_r_c {
                  // height: 16px;
                  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
                  font-weight: normal;
                  font-size: 16px;
                  color: rgba(201, 233, 248, 0.6);
                  line-height: 16px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  // margin-top: 12px;
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                }
                .lct_box_c_c_r_c1 {
                  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
                  font-weight: normal;
                  font-size: 16px;
                  color: #c9e9f8;
                  line-height: 16px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                }
              }
            }
          }
          .lct_box_d {
            width: 138px;
            height: 100%;
            // border: 1px red solid;
            border: 1px solid rgba(201, 233, 248, 0.2);
            display: flex;
            .lct_box_d_c1 {
              width: 52px;
              height: 100%;
              border-right: 1px solid rgba(201, 233, 248, 0.2);
              font-size: 16px;
              color: #c9e9f8;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .lct_box_d_c2 {
              flex: 1;
              height: 100%;
              font-size: 16px;
              color: rgba(201, 233, 248, 0.6);
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}

.size16 {
  font-size: 1rem;
}
.size20 {
  font-size: 1.25rem;
}

.color12 {
  color: #71f1ea;
}
.color13 {
  color: #c9e9f8;
}
.color14 {
  color: #ffffff;
}

.font_family_num {
  font-family: Helvetica-Bold !important;
  font-weight: bold;
}
</style>
